<template>
  <div id="allTableft2">
    <ul>
      <router-link
        v-for="(item, index) in list"
        :key="index"
        :to="{ path: item.path }"
      >
        <li>
          <el-row>
            <el-col :span="6" :sm="8"  :xs="24"><img :src="item.Imgs" alt=""/></el-col>
            <el-col :span="15" :sm="13" class="hidden-xs-only"
            ><p>{{ item.title }}</p></el-col
            >
            <el-col :span="3" :sm="3" class="hidden-xs-only"
            ><p>{{ item.numbers }}</p></el-col
            >
          </el-row>
        </li>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "allTableft2",
  data() {
    return {
      list: [
        {
          path: "/myGuanzhu1/",
          Imgs: require("../../assets/tianjiaguanzhu.png"),
          title: "添加关注",
          numbers: ""
        }
        // {path:'',Imgs:require('../../assets/sheying.webp'),title:'摄影',numbers:''},
        // {path:'',Imgs:require('../../assets/lvxing.webp'),title:'旅行·在路上',numbers:'100'},
        // {path:'',Imgs:require('../../assets/chengxunyuan.webp'),title:'程序员',numbers:'60'},
        // {path:'',Imgs:require('../../assets/sahngban.webp'),title:'上班这点事',numbers:'40'},
        // {path:'',Imgs:require('../../assets/guanggao.png'),title:'故事',numbers:'100'}
      ]
    };
  }
};
</script>

<style scoped>
#allTableft2 {
  width: 100%;
}
#allTableft2 li {
  line-height: 39px;
  padding: 10px 20px 10px 10px;
}
#allTableft2 li:hover {
  background-color: #eee;
}
#allTableft2 ul li img {
  border-radius: 5px;
  width: 40px;
  height: 40px;
}
#allTableft2 li .el-col-3 {
  text-align: right;
}
</style>
